//  jsx 原理
class Element {
  constructor(type, attrs, children) {
    this.type = type
    this.attrs = attrs || {}
    this.children = children
  }
  render() {
    // 负责把虚拟DOM转成真实DOM
    let ele = document.createElement(this.type)
    Object.keys(this.attrs).forEach(key => {
      // ele.setAttribute(key, this.attrs[key])
      switch (key) {
        case 'className':
          ele.setAttribute('class', this.attrs[key])
          break;
        case 'style':
          // 自己处理style
          ele.setAttribute('style', 'color:red;font-size:30px')
          break
        default:
          ele.setAttribute(key, this.attrs[key])
          break;
      }
    })
    this.children.forEach(child => {
      if (typeof child == 'string') {
        let node = document.createTextNode(child);
        ele.appendChild(node)
      } else {
        ele.appendChild(child.render())
      }
    })

    return ele
  }
}


let React = {
  createElement(type, attrs, ...children) {
    return new Element(type, attrs, children)
  }
}
let ReactDOM = {
  render(vN, container) {
    console.log(vN)
    container.appendChild(vN.render())
  }
}
// import React from 'react'
// import ReactDOM from 'react-dom'

var h = React.createElement("h1", { className: 'box' }, "hello world", React.createElement("b", { style: { color: 'red', fontSize: '30px' } }, "555"));
ReactDOM.render(h, document.getElementById('root'))